<template>
	<view>
		<cu-custom bgColor="bgmain" :isBack="true">
		    <view slot="content">话费充值</view>
		</cu-custom>
		
		<view class="line"></view>
		
		<input placeholder="请输入手机号" type="number" class="margin" v-model="phone" />
		
		<view class="text-df padding padding-bottom-xs">请选择运营商</view>
		<radio-group @change="radioChange" class="flex-direction margin-left margin-right" style="width: 96%;">
			<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
				<view class="flex align-center margin-right margin-bottom-sm justify-between">
					<image :src="item.icon" class="icon"></image>
					<view class="radio_name">{{item.name}}</view>
					<radio  style="transform: scale(0.77)" :value="item.value" :checked="index === current" />
				</view>
			</label>
		</radio-group>
		
		
		<view class="flex flex-wrap padding charge_box">
			<view v-for="(item,index) in dataList" :key="index" class="item padding text-center" :class="index==indexs?'item_active':''" @click="choose(index)">
				<view class="val">{{item.price_val}}元</view>
				<view class="price">优惠价{{item.price}}元</view>
			</view>
		</view>
		
		<view class="submit" @click="submit"><block v-if="data.price>0"><text class="margin-right-sm">￥{{data.price}}</text></block>立即充值</view>
		
	</view>
</template>

<script>
	var app = getApp()
	export default{
		data(){
			return{
				dataList:[],
				phone:'',
				items: [{
						value: 'yd',
						name: '移动',
						icon:'/static/yd.png'
					},
					{
						value: 'lt',
						name: '联通',
						icon:'/static/lt.png'
					},
					{
						value: 'dx',
						name: '电信',
						icon:'/static/dx.png'
					},
				],
				current: 0,
				operator:'',
				indexs:-1,
				data:{}
			}
		},
		onLoad() {
			this.getLst()
		},
		methods:{
			getLst()
			{
				var t = this;
				app.globalData.util.request({
				    url: 'MobileRecharge/index',
					data:{
						s_id:uni.getStorageSync('schoolId')
					},
				    success(res) {
						t.dataList = res.data.data.list
				        console.log(res.data.data.list)
				    }
				});
			},
			radioChange(e)
			{
				console.log(e.detail.value)
				this.operator = e.detail.value
			},
			choose(index)
			{
				this.indexs = index
				this.data = this.dataList[index]
				console.log(this.dataList[index].price)
			},
			submit()
			{
				uni.navigateTo({
					url: '/gc_school/pages/home/index?parmas1=hjljst&parma2s=hjljst1hjljst&parmas3=hjljst1hjljst&parmas4=hjljst1hjljst&parmas5=hjljst1hjljst&appid=wxb40cc4d3fb44c393&package=prepay_id=wx151710357980163f3ada5fcf7e50750000&paySign=8E117C677601B6BAAAEFBEC20E20D1F8'
				})
				return;
				var myreg = /^1[3456789]\d{9}$/;
				if (!myreg.test(this.phone)) {
					this.toast('手机号格式有误')
					return;
				}
				if(!this.data.price)
				{
					this.toast('请选择充值金额')
					return;
				}
				if(this.operator=='')
				{
					this.toast('请选择运营商')
					return;
				}
				app.globalData.util.request({
				    url: 'MobileRechargeOrder/add',
					data:{
						s_id:uni.getStorageSync('schoolId'),
						price:this.data.price,
						price_val:this.data.price_val,
						operator:this.operator,
						mobile:this.phone,
					},
				    success(res) {
				        console.log(res.data)
						uni.requestPayment({
							timeStamp: res.data.data.timestamp.toString(),
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: 'MD5',
							paySign: res.data.data.paySign,
							success: function (resu) {
								console.log('success');
								console.log(res.data.data);
								uni.showToast({
									title:'提交成功'
								})
							},
							fail: function (res) {
								console.log('fail');
							}
						});
				    }
				},true);
			},
			toast(title)
			{
				uni.showToast({
					title:title,
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		background-color: white;
	}
	.line{
		width: 100%;
		height: 16rpx;
		background-color: #f5f7fe;
		
	}
	
	.item{
		border: 1rpx solid #F2F2F2;
		border-radius: 15rpx;
		width: 30%;
		margin-bottom: 20rpx;
		margin-right: 22rpx;
		.val{
			font-size: 34rpx;
			font-weight: bold;
		}
		.price{
			font-size: 22rpx;
			margin-top: 10rpx;
		}
	}
	.item_active{
		border: 1rpx solid #EB2310;
		color: #EB2310;
		background-color: #FEF4F3;
	}
	input{
		margin-top: 40rpx !important;
		margin-bottom: 0 !important;
		border-bottom: 1rpx solid lightgrey;
		height: 60rpx;
		font-size: 32rpx;
	}
	.submit{
		background-color: #FE2502;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: white;
		border-radius: 50rpx;
		width: 80%;
		text-align: center;
		margin: 30rpx auto;
	}
	.radio_name{
		font-size: 30rpx;
		flex-grow: 1;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}
	.icon{
		width: 45rpx;height: 45rpx;
	}
	.icons{
		width: 55rpx;height: 55rpx;
	}
	.margin-top0{
		margin-top: 0 !important;
	}
	.margin-bottom0{
		margin-bottom: 0 !important;
	}
</style>